<template>
  <div class="exam-monitor">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>考试监控</span>
          <el-button type="primary" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </div>
      </template>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="进行中的考试" name="ongoing">
          <el-table :data="ongoingExams" v-loading="loading">
            <el-table-column prop="title" label="考试名称" />
            <el-table-column prop="participants" label="参与人数" />
            <el-table-column prop="submitted" label="已提交" />
            <el-table-column prop="remaining" label="剩余时间" />
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button size="small" type="primary" @click="viewDetails(row)" icon="View">查看详情</el-button>
                <el-button size="small" type="warning" @click="sendNotice(row)" icon="Message">发送通知</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="考试统计" name="statistics">
          <div class="statistics-grid">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">{{ todayExams }}</div>
                <div class="stat-label">今日考试</div>
              </div>
            </el-card>
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">{{ totalParticipants }}</div>
                <div class="stat-label">总参与人数</div>
              </div>
            </el-card>
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">{{ completionRate }}%</div>
                <div class="stat-label">完成率</div>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const activeTab = ref('ongoing')
const ongoingExams = ref([])
const todayExams = ref(5)
const totalParticipants = ref(120)
const completionRate = ref(85)

const refreshData = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('数据已刷新')
  }, 1000)
}

const viewDetails = (row: any) => {
  ElMessage.info(`查看考试详情: ${row.title}`)
}

const sendNotice = (row: any) => {
  ElMessage.info(`发送通知: ${row.title}`)
}

onMounted(() => {
  ongoingExams.value = [
    { id: 1, title: 'Java程序设计期末考试', participants: 45, submitted: 30, remaining: '30分钟' },
    { id: 2, title: '数据库原理测试', participants: 35, submitted: 28, remaining: '15分钟' }
  ]
})
</script>

<style scoped>
.exam-monitor {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  text-align: center;
}

.stat-item {
  padding: 20px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}
</style>